import React from "react";
import { withRouter } from "react-router-dom";
import { footerMenu } from "../../config";
import "./style.css";

class AppFooter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
    };
  }

  addClass = (index,item) => {
    this.setState({
      currentIndex: index,
    });
    this.props.history.push({pathname:`${item.urlPath}`});
  };

  render() {
    const { currentIndex } = this.state;

    return (
      <div className="bottom-nav">
        {footerMenu.map((item, index) => {
          return (
            <ul key={item.id} onClick={() => this.addClass(index,item)}>
              <li
                className={
                  currentIndex === index ? `${item.name} active` : item.name
                }
              ></li>
              <li className={currentIndex === index ? "text active" : "text"}>
                {item.title}
              </li>
            </ul>
          );
        })}
      </div>
    );
  }
}

export default withRouter(AppFooter);
